
<script>
import {getTeacherManage} from '@/api/teacherManage'

export default{
    data(){
        return{
            tableData: [],
            currentPage: 1
        }
    },
    mounted () {
        // 获取管理员列表
        getTeacherManage().then(res => {
            // console.log(res,1111111111);
            this.tableData = res
            // console.log(this.tableData);
        })
    },
    computed: {
        // +++++++++++++++ 计算出当前页该显示什么数据 
        computedTableData () {
            return this.tableData.slice((this.currentPage - 1) * 10, (this.currentPage - 1) * 10 + 10)
        }
    }
        
}
</script>
<script setup>
import { Search, Upload } from '@element-plus/icons-vue'
import {getTeacherManage} from '@/api/teacherManage'
import { ref } from 'vue'
const List=ref([])
getTeacherManage().then(res=>{
    // console.log('数据获取成功111',res);
    List.value=res
})
const value = ref('')
const holidays = [
    '2021-10-01',
    '2021-10-02',
    '2021-10-03',
    '2021-10-04',
    '2021-10-05',
    '2021-10-06',
    '2021-10-07',
]
const isHoliday = ({ dayjs }) => {
    return holidays.includes(dayjs.format('YYYY-MM-DD'))
}
</script>

<template>
    <div class="timetable">
        <span class="riqi">日期</span>
        <div class="demo-date-picker">
            <el-date-picker v-model="value" type="date" placeholder="请选择日期" format="YYYY/MM/DD"
                value-format="YYYY-MM-DD" editable>
                <template #default="cell">
                    <div class="cell" :class="{ current: cell.isCurrent }">
                        <span class="text">{{ cell.text }}</span>
                        <span v-if="isHoliday(cell)" class="holiday" />
                    </div>
                </template>
            </el-date-picker>
        </div>
        <el-button type="primary" class="left-btn2"><el-icon>
                <Search />
            </el-icon>查询</el-button>
        <el-button type="primary" class="left-btn1"><el-icon>
                <Upload />
            </el-icon>导出</el-button>
        <el-table style="width: 100%"  :data="computedTableData"   >
            <el-table-column  prop="classDate" label="时间"  :sortable="true" />
            <el-table-column  prop="DaiBanTime" label="带班课时" />
            <el-table-column  prop="ExtraAward" label="额外激励" />
            <el-table-column  prop="ClassHourComputed"  label="课时计算" />
            <el-table-column  prop="artificial" label="人工找补" />
            <el-table-column  prop="total" label="总计" />
        </el-table>
        <el-pagination background v-model:current-page="currentPage" layout="prev, pager, next" :total="tableData.length" />
    </div>


</template>


  
<style lang="scss" scoped>
.el-pagination{
    position: absolute;
    left: 39%;
    margin-top: 10px;
}
.timetable {
    position: relative;
    width: 100%;
    height: 550px;
    background-color: white;
    padding: 10px 20px;
    box-sizing: border-box;
}

.riqi {
    color: rgb(107, 106, 106);
    position: absolute;
    top: 25px;
}

.left-btn1 {
    position: absolute;
    right: 30px;
    background-color: #5774e7;
}

.left-btn2 {
    position: absolute;
    right: 110px;
    background-color: #5774e7;
}

.el-table {
    --el-table-header-text-color: white;
    --el-table-header-bg-color: #5774e7;
    margin-top: 50px;
}

.demo-date-picker {
    position: absolute;
    left: 11px;
    top: 18px;
    margin-left: 60px;
}

.cell {
    height: 30px;
    padding: 3px 0;
    box-sizing: border-box;
}

.cell .text {
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
    line-height: 24px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
}

.cell.current .text {
    background: #626aef;
    color: #fff;
}

.cell .holiday {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--el-color-danger);
    border-radius: 50%;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
}
</style>
  